<!Doctype html>
<html>
<head>
    <link href="{{ asset('/css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('/css/admin/main.css') }}" rel="stylesheet">
    <!-- Fonts -->
    <link href='//fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css'>
    <style type="text/css">
        .box {
            margin:20px 0 0 30px;
        }
        label.parent {
            display:inline-block;
            width:90%;
            font-weight:bold;
            border-bottom:1px solid #ccc;
        }
        div.operation {
            margin:300px 0 0 120px;
        }
        div.operation button {
            width:120px;
            margin-left:30px;
        }
    </style>
</head>
<body>
@foreach($list as $key => $item)
<div class="box">
    <div class="checkbox">
        <label class="parent">
            <input type="checkbox" class="parent" data="{{ $key }}">
            {{ $item->role_name }}
        </label>
    </div>
    @foreach($item->child as $k => $child)
        <label class="checkbox-inline">
            <input type="checkbox" class="roles childs_{{ $key }}" id="inlineCheckbox1" value="{{ $child->id }}"> {{ $child->role_name }}
        </label>
    @endforeach
</div>
@endforeach
<div class="operation">
    <button class="btn btn-success" id="confirm">确定</button>
    <button class="btn btn-danger" id="cancel">取消</button>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

<script>

    var index = parent.layer.getFrameIndex(window.name); //获取窗口索引

    $('input.parent').click(function() {
        var key = $(this).attr('data');

        if($(this).get(0).checked)
        {
            $.each($('input.childs_' + key), function() {
                $(this).get(0).checked = true;
            });
        }
        else
        {
            $.each($('input.childs_' + key), function() {
                $(this).get(0).checked = false;
            });
        }
    });

    $('#confirm').click(function() {
        var ids = '';

        $('input.roles:checked').each(function() {
            ids = ids + $(this).val() + ',';
        });

        ids = ids.substring(0, ids.lastIndexOf(','));

        $(parent.document).find('#open_select_box').hide();

        $(parent.document).find('input[name=roles]').show().val(ids);

        parent.layer.close(index);
    });

</script>

</body>
</html>